<template>
    <div class="container">
        <a-tabs class="setting-tab">
            <a-tab-pane key="list" :tab="tab">
                <a-table :columns="columns" :dataSource="list" :pagination="{
                    current: page.currentPage,
                    pageSize: page.pageSize,
                    total: page.total,
                    onChange: changePage
                }">
                    <template #bodyCell="{ column, record }">
                        <a-space v-if="column.dataIndex === 'avatar'">
                            <img style="width:60px;heigth:60px" :src="record.student.avatar" :alt="record.student.stuName">
                        </a-space>
                        <a-space v-if="column.dataIndex === 'name'">
                            {{ record.student.stuName }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'createdAt'">
                            {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'status'">
                            <a-tag :color="record.process === 1 ? '#87d068' : '#f50'">{{
                                record.process === 1 ?
                                '通过' : '违规'
                            }} </a-tag>
                        </a-space>
                        <a-space v-if="column.dataIndex === 'operate'">
                            <a-tag class="btnTag" color="#34495e" @click="detailRow(record.id)">查看详情</a-tag>
                            <a-tag class="btnTag" color="#87d068" @click="PassedRow(record.id)">审核通过</a-tag>
                            <a-tag class="btnTag" color="#f50" @click="isNotPassed(record.id)">取消通过</a-tag>
                        </a-space>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
    </div>
    <a-modal v-model:visible="visible" title="内容" @ok="handleOk">
        <p v-html="serviceContent"></p>
    </a-modal>
</template>

<script setup lang='ts'>
import type { Post } from '@/types/posts'
import type { Repair } from '@/types/repairs';
import type { IPage } from '@/types/table'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const { tab } = defineProps<{
    tab: string
}>()

const page = reactive<IPage>({
    currentPage: 1,
    pageSize: 5,
    total: 0
})

const columns = [
    {
        title: '序号',
        customRender(obj: any) {
            // 要和当前的分页数据进行集合
            // 1 -> 1
            // 2 -> (页码 -1） * 每页条数 + 1
            return (page.currentPage - 1) * page.pageSize + obj.index + 1
        }
    },
    { title: '图片', dataIndex: 'avatar' },
    { title: '姓名', dataIndex: 'name' },
    { title: '标题', dataIndex: 'title' },
    { title: '时间', dataIndex: 'createdAt' },
    { title: '状态', dataIndex: 'status' },
    { title: '操作', dataIndex: 'operate' }
]

const list = ref<Post[] | Repair[]>([])


const getPostList = async () => {
    const res = await proccessList({ currentPage: page.currentPage, pageSize: page.pageSize })
    list.value = res.data.post
    page.total = res.data.total
}

const getRunList = async () => {
    const res = await getServicesList({ currentPage: page.currentPage, pageSize: page.pageSize })
    list.value = res.data.service
    page.total = res.data.total
}

onMounted(async () => {
    if (tab === '内容审核') {
        getPostList()
    } else {
        getRunList()
    }
})


const visible = ref<boolean>(false)
// 跑腿帖子内容
const serviceContent = ref('<p>你好</p>')

const handleOk = (e: MouseEvent) => {
    console.log(e)
    visible.value = false
    serviceContent.value = ''
}

const router = useRouter()
const detailRow = async (id: number) => {
    // console.log(id)
    if (tab === '内容审核') {
        router.push({
            path: `/detail/${id}`,
            query: {
                posts: id
            }
        })
    } else {
        visible.value = true
        const res = await getOneServices(id)
        serviceContent.value = res.data.service.content as string
    }
}

const isNotPassed = async (id: number) => {
    if (tab === '内容审核') {
        const res = await notPassed(id)
        if (res.code !== 201) return message.error('操作失败')
        getPostList()
    } else {
        const res = await notPassedForService(id)
        if (res.code !== 201) return message.error('操作失败')
        getRunList()
    }
}

const PassedRow = async (id: number) => {
    if (tab === '内容审核') {
        const res = await isPassed(id)
        if (res.code !== 201) return message.error('操作失败')
        getPostList()
    } else {
        const res = await isPassedForService(id)
        if (res.code !== 201) return message.error('操作失败')
        getRunList()
    }

}

const changePage = async (c: number, p: number) => {
    page.currentPage = c,
        page.pageSize = p
    if (tab === '内容审核') {
        getPostList()
    } else {
        getRunList()
    }
}
</script>

<style scoped lang="less">
.container {
    padding: 16px;

    .setting-tab {
        background-color: #fff;
        padding: 16px;
        height: 100%;

        .pagination {
            margin-top: 20px;
        }
    }
}

.btnTag:hover {
    cursor: pointer;
}
</style>